<%- include('common/header.html') %>

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/index/css/project_04.css" type="text/css">
<link rel="stylesheet" href="/index/css/index.css" />
<link rel="stylesheet" href="/index/css/animate.css">
<style>
  .header_banner {
    position: relative;
    height: 240px;
    width: 100%;
    background-image: url('https://ccdn.goodq.top/caches/6519d4c1d4722a0f0d85a70bbee8ffbe/aHR0cHM6Ly81YWViZjhiNjA1OTMxLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMDIvN2YyMmUxYzY4Y2E0ZDJhMDM3NmFlYzRlMzk4YzgzZjYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp');
  }

  .header_content {
    position: absolute;
    left: 50%;
    transform: translateX(-600px);
    margin: auto;
    width: 1200px;
    height: 100%;
  }

  .header_text {
    position: absolute;
    width: 100%;
    height: 120px;
    top: 50%;
    transform: translateY(-60px);
  }

  .withe_solid {
    float: left;
    top: 65px;
    width: 65px;
    border: 3px solid #FFFFFF;
    /* margin-bottom: 20px; */
  }

  .header_title {
    margin-top: 20px;
  }

  .header_title h4 {
    color: #FFFFFF;
    font-size: 34px;
    font-weight: bold;
    vertical-align: bottom;
  }

  .header_text_tot p {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: #FFFFFF;
    padding: 10px 0 0 0;
    vertical-align: bottom;
  }

  .section-background-overlay {
    background-color: #f7f7f7;
  }

  .header nav ul li a {
    height: 35px;
  }

  .content .contented .left_content p {
    position: relative;
    width: 60%px !important;
    height: 60px !important;
    display: inline-block !important;
    line-height: 20px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    font-size: 13px;
    padding-right: 12px;
    /*   display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
  }

  .content .contented .article_text_after {
    /* display: inline;
    content: "...";
    font-size: 16px; */
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .icon-play3 a strong{
    font-size: 13px;
    color: #5e5e5e;
    line-height: 19px;
  }
  .conmentone .row .share .contactone-befor p,.conmentone .row .share .contactone-befor a{
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: #606060;
    min-width: 300px;
    
  }
</style>
<!-- 引入图标 -->
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-play3" viewBox="0 0 32 32">
    <path d="M6 4l20 12-20 12z"></path>
  </symbol>
  <path
    d="M12 20l4-2 14-14-2-2-14 14-2 4zM9.041 27.097c-0.989-2.085-2.052-3.149-4.137-4.137l3.097-8.525 4-2.435 12-12h-6l-12 12-6 20 20-6 12-12v-6l-12 12-2.435 4z">
  </path>
</svg>

<body>
  <!-- 头部开始 -->
  <div class="header_banner">
    <div class="header_content">
      <div class="header_text">
        <div class="withe_solid w">
        </div>
        <div class="header_title">
          <h4>产品服务</h4>
        </div>
        <div class="header_text_tot">
          <p>强人工智能人脸识别系统</p>
        </div>
      </div>
    </div>
  </div>




  <div class="header">
    <div class="header_box">
      <nav>
        <ul>
          <li style="width: 100px;">
            <a href="/articlelist?id=0" style="width: 100px;" title="新闻">
              <h3 width: 100px;>全部</h3>
              <i class="underline"></i>
            </a>
          </li>
          <li style="width: 100px;">
            <a href="/articlelist?id=1" style="width: 100px;" title="新闻">
              <h3 width: 100px;>公司公告</h3>
              <i class="underline"></i>
            </a>
          </li>
          <li style="width: 100px;">
            <a href="/articlelist?id=2" style="width: 100px;" title="行业动态">
              <h3 width: 100px;>行业动态</h3>
              <i class="underline"></i>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <hr style="height: 1px;border:none;border-top:1px solid #555555">

  <!-- 行业动态开始 -->
  <div class="container">
    <div class="row">
      <div class="conmentone col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <div class="left">
          <ul style="animation: bounceInRight 2s;">
            <% if (data.length > 0) { %>
            <% data.forEach(item=>{ %>

            <div class="space"></div>
            <a href="/article?id=<%= item.article_id %>">
              <div class="left_li">
                <div class="content row">
                  <div class="imagebox col-lg-4 hidden-md hidden-sm col-xs-4">
                    <br>
                    <img src="<%= item.article_pic %>" alt="" class="image">
                  </div>
                  <div class="contented col-lg-8 col-md-12 col-sm-12 col-xs-12">
                    <br>
                    <h3><%= item.article_name %></h3>
                    <h4>发布时期: <%= item.article_date%> 分类: <%= item.ac_name %></h4>
                    <div class="left_content">
                      <p>


                        <%- item.article_content %><span class="article_text_after">...</span></p>

                    </div>

                  </div>
                  <br>
                </div>
              </div>
            </a>
            <% }) %>
            <% } %>
            <% if (news.length > 0) { %>
            <% news.forEach(item=>{ %>

            <div class="space"></div>
            <a href="/article?id=<%= item.article_id %>">
              <div class="left_li">
                <div class="content row">
                  <div class="imagebox col-lg-4 hidden-md hidden-sm col-xs-4">
                    <br>
                    <img src="<%= item.article_pic %>" alt="" class="image">
                  </div>
                  <div class="contented col-lg-8 col-md-12 col-sm-12 col-xs-12">
                    <br>
                    <h3><%= item.article_name %></h3>
                    <h4>发布时期: <%= item.article_date%> 分类: <%= item.ac_name %></h4>
                    <div class="left_content">
                      <%- item.article_content %>
                    </div>
                  </div>
                  <br>
                </div>
              </div>
            </a>
            <% }) %>
            <% } %>
            <div class="left_li">
              <div class="space"></div>
            </div>
            <div class="left_li">
              <div class="swappage col-lg-12 hidden-md hidden-sm hidden-xs">
                <div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-1"
                  style="margin-top: 10px;padding-top: 5px;font-size: 20px">
                  <a href="javascript:" class="layui-laypage-first" data-page="0">首页</a>
                  <% if (page <= 1) { %>
                  <a href="#" class="layui-laypage-pre" data-page="2">上一页</a>
                  <% }else{%>
                  <a href="?id=<%= id %>&page=<%= page-1 < 1 ? 1 : page-1 %>" class="layui-laypage-pre"
                    data-page="2">上一页</a>
                  <% } %>
                  <% if (page >= Math.ceil(count / 5)) { %>
                  <a href="#" class="layui-laypage-next" data-page="2">下一页</a>
                  <% }else{%>
                  <a href="?id=<%= id %>&page=<%= page*1+1 %>" class="layui-laypage-next" data-page="2">下一页</a>
                  <% } %>
                  <a href="javascript:" class="layui-laypage-last" data-page="2">末页</a>
                </div>
              </div>
            </div>
            <div class="left_li">
              <div class="space"></div>
            </div>
          </ul>
        </div>
      </div>
      <div class="conmenttwo col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="right">
          <ul>
            <div class="space"></div>
            <div class="space"></div>
            <div class="space"></div>
            <div class="news_flash">
              <h3>
                &nbsp;&nbsp;&nbsp;
                7x12h 快讯
              </h3>
            </div>

            <% quick.forEach(item=>{ %>
            <li style="margin-left: 20px;">
              <svg class="icon icon-play3">
                <use xlink:href="#icon-play3"></use>
              </svg>
              <a href="/article?id=<%= item.article_id %>"><strong>&nbsp;&nbsp;<%= item.article_name %></strong></a>
            </li>
            <div class="contactone">
              <font color="#919191"><%= item.article_date %></font>
            </div>
            <br><br><br>
            <% }) %>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 行业动态结束 -->
  <%- include('common/footer.html') %>
</body>
<!-- 行业动态分页js开始 -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    let currentPage = Number(`<%= page %>`);
    let pageSize = 5;
    let total = Number(`<%= count %>`);
    let totalsize = 1;
    let id = Number(`<%= id %>`)

    $(function () {
      $(".layui-laypage-count").text("共" + total + "条");
      if (total > 0) {
        sufa()
      }
    })

    $(".layui-box").delegate(".pageNumber", "click", function () {
      let no = parseInt($(this).attr("data"));
      currentPage = no;
      sufa();
    })

    $(".pageSizeSelect").on('change', function () {
      pageSize = parseInt($(this).find("option:selected").val());
      currentPage = 1;
      sufa();
    })

    $(".layui-laypage-first").on('click', function () {
      if (currentPage != 1) {
        currentPage = 1;
        sufa();
      }
    })

    $(".layui-laypage-pre").on('click', function () {
      if (currentPage != 1) {
        currentPage = currentPage - 1;
        sufa();
      }
    })

    $(".layui-laypage-next").on('click', function () {
      if (currentPage != totalsize) {
        currentPage = currentPage + 1;
        sufa();
      }
    })

    $(".layui-laypage-last").on('click', function () {
      if (currentPage != totalsize) {
        currentPage = totalsize;
        sufa();
      }
    })

    function sufa() {
      let aa = [];
      aa.push(currentPage);
      totalsize = Math.ceil(total / pageSize);
      for (let i = 1; i < 5; i++) {
        let a = currentPage + i;
        let b = currentPage - i;
        if (aa.length < 5) {
          if (a <= totalsize) aa.push(a);
          if (b > 0) aa.push(b);
        }
      }
      aa.sort(function compare(val1, val2) {
        return val1 - val2;
      });

      let content = "";
      for (let i = 0; i < aa.length; i++) {
        if (aa[i] == currentPage) {
          content += "<a class=\"pageNumber aaa\" href='?id=" + id + "&page=" + aa[i] + "' data='" + aa[i] + "'>" +
            aa[i] +
            "</a>";
        } else {
          content += "<a class=\"pageNumber\" href='?id=" + id + "&page=" + aa[i] + "' data='" + aa[i] + "'>" + aa[
            i] + "</a>";
        }
      }
      $(".pageNumber").remove();
      $(".layui-laypage-pre").after(content);
    }
  })
</script>
<!-- 行业动态分页js结束 -->

</html>

<script>
  window.onload = function () {
    layui.use(['upload', 'element', 'util', 'layer', 'form', 'jquery', 'upload', 'layedit', 'laydate'], function () {
      var layedit = layui.layedit;

      // 富文本编辑器
      var layeditIns = layedit.build('richText', {
        height: 180, //设置编辑器高度
      });
    })
  }
</script>